<template>
  <div>
    <el-container class="background_content" style="border: 1px solid #eee">
      <el-aside class="aside" width="280px" style="background-color: white">
        <el-tree
          :data="organizations"
          :props="defaultProps"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-aside>
      <el-container class="colume">
        <el-collapse value="1">
          <el-collapse-item name="1">
            <template slot="title">
              <i class="el-icon-info" style="padding: 0 2px 0 15px"></i>
              组织信息
            </template>
            <el-card class="box-card">
              <el-descriptions
                class="margin-top"
                :column="3"
                size="medium"
                border
                labelClassName="desc"
              >
                <el-descriptions-item>
                  <template slot="label">
                    <i class="font_color">组织名称</i>
                  </template>
                  <i class="i_border">{{ currentOrgInfo.name }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="font_color">组织简称</i>
                  </template>
                  <i class="i_border">{{ currentOrgInfo.abbre_name }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="font_color">组织代码</i>
                  </template>
                  <i class="i_border">{{ currentOrgInfo.code }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="font_color">组织类型</i>
                  </template>
                  <i class="i_border">{{
                    currentOrgInfo.branch_type | filterType
                  }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="font_color">组织属性</i>
                  </template>
                  <i class="i_border">{{
                    currentOrgInfo.property | filterProperty
                  }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 上级组织 </template>
                  <i class="i_border">{{ currentOrgInfo.parent_branch }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="font_color">负责人</i>
                  </template>
                  <i class="i_border">{{ currentOrgInfo.head }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="font_color">负责人手机</i>
                  </template>
                  <i class="i_border">{{ currentOrgInfo.head_mobile }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 负责人身份证 </template>
                  <i class="i_border">{{ currentOrgInfo.head_id_card }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="font_color">状态</i>
                  </template>
                  <!-- <i class="i_border">{{
                    currentOrgInfo.status | filterStatus
                  }}</i> -->
                  <i class="i_border">
                    <el-tag v-if="currentOrgInfo.status === 0" type="danger"
                      >启用</el-tag
                    >
                    <el-tag v-if="currentOrgInfo.status === 1" type="success"
                      >禁用</el-tag
                    >
                  </i>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    <i class="font_color">联系地址</i>
                  </template>
                  <i class="i_border">{{ currentOrgInfo.address }}</i>
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label"> 业务电话 </template>
                  <i class="i_border">{{ currentOrgInfo.business_phone }}</i>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 备注 </template>
                  <i class="i_border">{{ currentOrgInfo.remark }}</i>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-collapse-item>
        </el-collapse>

        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="组织" name="1">
            <Organization
              :currentOrgInfo="currentOrgInfo"
              @getOrganizationBox="getOrganizationBox"
            ></Organization>
          </el-tab-pane>
          <el-tab-pane
            label="员工"
            name="2"
            v-if="isHavePermission('company_organizational_employee_list')"
          >
            <Staff :currentOrgInfo="currentOrgInfo"></Staff>
          </el-tab-pane>
        </el-tabs>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import {
  organizationBox,
  organizationList,
  queryorganization,
  bolckorganization,
  newLystaff,
  amendStaff,
  queryStaff,
} from "@/api/organization";
import Organization from "./components/organization.vue";
import Staff from "./components/staff.vue";
import { Types, Propertys, Status } from "./constant";
import { isHavePermission } from "@/utils/mUtils";

export default {
  data() {
    return {
      // 默认选中组织tab
      activeName: "1",
      // 无限极组织列表
      organizations: [],
      // 当前选中组织
      currentOrgInfo: {},
      // el—tree 数据配置
      defaultProps: {
        children: "next_level_data",
        label: "branch_name",
      },
    };
  },
  computed: {
    showText() {
      return this.formData.id ? "编辑" : "新增";
    },
  },
  components: {
    Organization,
    Staff,
  },
  created() {
    this.types = Types;
    this.propertys = Propertys;
    this.status = Status;
  },
  mounted() {
    this.getOrganizationBox();
  },
  filters: {
    filterType(type) {
      const obj = Types.find((item) => item.id === String(type)) || {};
      return obj.value;
    },
    filterProperty(p) {
      const obj = Propertys.find((item) => item.id === String(p)) || {};
      return obj.value;
    },
    filterStatus(s) {
      const obj = Status.find((item) => item.id === String(s)) || {};
      return obj.value;
    },
  },
  methods: {
    // tree node click
    handleNodeClick(val) {
      this.getQueryorganization({ id: val.id });
    },
    // 组织无限极tree
    getOrganizationBox() {
      organizationBox().then((res) => {
        if (res.data) {
          this.organizations = res.data;
          if (!Object.keys(this.currentOrgInfo).length) {
            // 当前组织信息赋默认值
            this.getQueryorganization({ id: this.organizations[0].id });
          }
        }
      });
    },
    // 查询当前选中组织并赋值
    getQueryorganization(params) {
      queryorganization(params).then((res) => {
        if (res.code === 10000) {
          this.currentOrgInfo = res.data;
        }
      });
    },
    isHavePermission(val) {
      return isHavePermission(val);
    },
  },
};
</script>
<style lang="less" scoped>
.aside {
  height: 100%;
}

/deep/.el-tabs--border-card {
  width: 99.8% !important;
}

/deep/.sanji .el-submenu__title {
  padding-left: 40px !important;
}

.background_content {
  // height: calc(100vh - 18vh);
  position: relative;
}

/deep/.el-descriptions-item__container {
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
}

/deep/.el-descriptions-item__label {
  width: 150px !important;
  font-size: 14px !important;
  text-align: right !important;
  margin-right: 0 !important;
}

/deep/.background_content .el-menu-item {
  line-height: 40px !important;
  height: 40px !important;
}

.i_border {
  color: #333;
  // background-color: #f2f9ff;
  // border: 1px solid #dedede;
  // cursor: no-drop;
  // width: 150px;
  // padding-left: 10px;
  // min-height: 42px;
}

.colume {
  flex-direction: column;
}

.font_color {
  color: #ff0000;
}
</style>
